<template>
  <div class="dialog-mask" @click.self="$emit('close')">
    <div class="dialog-content">
      <h3>发红包</h3>
      <div class="form-row">
        <label>金额：</label>
        <input v-model.number="money" type="number" min="1" placeholder="请输入金额" />
      </div>
      <div class="form-row">
        <label>数量：</label>
        <input v-model.number="size" type="number" min="1" placeholder="请输入数量" />
      </div>
      <div class="dialog-actions">
        <button class="btn confirm" @click="handleConfirm">确定</button>
        <button class="btn cancel" @click="$emit('close')">取消</button>
      </div>
    </div>
  </div>
  <div v-if="showMsg" class="custom-alert-mask">
    <div class="custom-alert-box">
      <div class="custom-alert-content">{{ msgContent }}</div>
      <button class="custom-alert-btn" @click="showMsg = false">知道了</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from '../axios';

const emit = defineEmits(['close', 'success', 'updateMoney']);
const money = ref(100);
const size = ref(5);
const showMsg = ref(false);
const msgContent = ref('');

const handleConfirm = async () => {
  if (!money.value || !size.value || money.value <= 0 || size.value <= 0) {
    showAlert('请输入正确的金额和数量');
    return;
  }
  try {
    const res = await axios.get('/red-package/set', {
      params: { size: size.value, money: money.value }
    });
    if (res.data.code === 200) {
      // 发红包成功后获取最新余额
      const userRes = await axios.get('/user/getInfo');
      if (userRes.data.code === 200) {
        emit('updateMoney', userRes.data.data?.money || 0);
      }
      emit('success');
      emit('close');
    } else {
      showAlert((res.data?.msg || '未知错误'));
    }
  } catch (e) {
    showAlert('接口异常');
  }
};

function showAlert(msg) {
  msgContent.value = msg;
  showMsg.value = true;
}
</script>

<style scoped>
.dialog-mask {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.dialog-content {
  background: #fff;
  border-radius: 10px;
  padding: 32px 28px 24px 28px;
  min-width: 280px;
  max-width: 90vw;
  box-shadow: 0 4px 24px #409eff22;
  text-align: center;
}
h3 {
  margin: 0 0 18px 0;
  font-size: 22px;
  font-weight: 600;
}
.form-row {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
  gap: 10px;
  justify-content: center;
}
.form-row label {
  min-width: 48px;
  font-size: 16px;
  color: #333;
}
.form-row input {
  width: 120px;
  padding: 8px 10px;
  border: 1px solid #e0e3e8;
  border-radius: 6px;
  font-size: 16px;
  outline: none;
  background: #f9fafb;
  transition: border 0.2s;
}
.form-row input:focus {
  border: 1.5px solid #409eff;
  background: #fff;
}
.dialog-actions {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 10px;
}
.btn {
  min-width: 80px;
  padding: 9px 0;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.confirm {
  background: linear-gradient(90deg, #409eff 0%, #66b1ff 100%);
  color: #fff;
}
.confirm:hover {
  background: linear-gradient(90deg, #3076c9 0%, #409eff 100%);
}
.cancel {
  background: #f2f3f5;
  color: #666;
}
.cancel:hover {
  background: #e0e3e8;
}
.custom-alert-mask {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
.custom-alert-box {
  background: #fff7f0;
  border: 2px solid #f56c6c;
  border-radius: 12px;
  padding: 28px 32px 20px 32px;
  min-width: 220px;
  box-shadow: 0 4px 24px #f56c6c22;
  text-align: center;
}
.custom-alert-content {
  color: #e24444;
  font-size: 17px;
  margin-bottom: 18px;
  font-weight: bold;
}
.custom-alert-btn {
  background: #f56c6c;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 28px;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s;
}
.custom-alert-btn:hover {
  background: #e24444;
}
</style>
